/**
 * @Title: index.js
 * @Description: index
 * @author: Fanchao
 * @date: 2020/8/21 12:28 上午
 * @version V1.0
 */
import React, { useEffect, useState } from 'react';
import { Button, Popconfirm, Table } from 'antd';
import styles from './index.less';
import SectionTitle from 'components/SectionTitle';
import AddSomeButton from 'components/AddSomeButton';
import FilterByKeyWord from 'components/FilterByKeyWord';
import { connect } from 'umi';
import UserModal from '@/pages/users/administrators/components/UserModal';
import storageUtils from 'utils/storage';
import UpdatePassword from 'components/UpdatePassword';

const Administrators = ({ administrators: { dataSource, keyword, modalTitle, modalVisible }, dispatch, loading }) => {
    const [passwordVisible, setPasswordVisible] = useState(false);
    const [userId, setUserId] = useState(null);
    const isSuperAdmin = storageUtils.getUser().userRoleTypes.includes('Super_Admin');
    useEffect(() => {
        dispatch({
            type: 'administrators/getDataSource',
            payload: {
                keyword: '',
            },
        });
        dispatch({
            type: 'administrators/getUnitsTreeData',
            payload: {},
        });
    }, []);
    const columns = [
        {
            title: '管理员姓名',
            dataIndex: 'adminRealName',
            align: 'left',
        },
        {
            title: '证件号',
            dataIndex: 'credentialsNo',
            align: 'left',

        },
        {
            title: '所属单位',
            dataIndex: 'department',
            align: 'left',
        },
        {
            title: '备注',
            dataIndex: 'comment',
            align: 'left',
        },
        {
            title: '操作',
            align: 'left',

            render: (item) => {
                return (
                    <div>{
                        isSuperAdmin ? (
                            <Button
                                style={{ padding: 2, fontWeight: 'bold', color: 'gold' }}
                                type="link"
                                onClick={() => updatePassword(item)}
                            >
                                重置密码
                            </Button>
                        ) : null
                    }
                        {/*<Button style={{ padding: 2, fontWeight: 'bold' }} type="link"*/}
                        {/*        onClick={() => updateItem(item)}>修改</Button>*/}
                        <Popconfirm title="是否要删除？" onConfirm={() => handleDelete(item)}>
                            <Button style={{ padding: 2, color: '#C21217', fontWeight: 'bold' }} type="link">删除</Button>
                        </Popconfirm>

                    </div>
                );
            },
        },
    ];
    const title = '新增管理员';
    const searchByKeyWord = (keyword) => {
        dispatch({
            type: 'administrators/getDataSource',
            payload: {
                keyword,
            },
        });
    };

    const addItem = (item) => {
        dispatch({
            type: 'administrators/setModalTitle',
            payload: '新增管理员',
        });
        dispatch({
            type: 'administrators/setModalVisible',
            payload: true,
        });
        dispatch({
            type: 'administrators/setItemData',
            payload: item,
        });
    };
    const updateItem = (item) => {
        dispatch({
            type: 'administrators/setModalTitle',
            payload: '修改领导',
        });
        dispatch({
            type: 'administrators/setModalVisible',
            payload: true,
        });
        dispatch({
            type: 'administrators/setItemData',
            payload: item,
        });
    };
    const handleDelete = (item) => {
        dispatch({
            type: 'administrators/removeAdminUser',
            payload: {
                adminUserId: item.adminUserId,
            },
            callback: (result) => {
                if (result) {
                    dispatch({
                        type: 'administrators/getDataSource',
                        payload: {
                            keyword: '',
                        },
                    });
                }
            },
        });

    };
    const updatePassword = (item) => {
        setPasswordVisible(true);
        setUserId(item.userId);
    };
    return (
        <div className={styles.pageContainer}>
            <div className={styles.pageContainerHeader}>
                <SectionTitle title={title}/>
                <div style={{ width: '220px' }} onClick={() => addItem({})}>
                    <AddSomeButton title={title}/>
                </div>
            </div>
            <div className={styles.pageContainerTable}>
                <SectionTitle title={'已有管理员'}/>
                <FilterByKeyWord onSearch={keyword => searchByKeyWord(keyword)}
                                 onReset={keyword => searchByKeyWord(keyword)}/>
                <div className={styles.tableContainer}>
                    <Table
                        bordered={false} // 是否有边框
                        rowKey='adminUserId' // 唯一key值
                        loading={loading} // 加载动画
                        columns={columns} // 表头
                        dataSource={dataSource}
                        pagination={false}
                    />
                </div>
            </div>
            <UserModal
                title={modalTitle}
                visible={modalVisible}
            />
            <UpdatePassword
                visible={passwordVisible}
                userId={userId}
                cb={(value) => setPasswordVisible(value)}
            />
        </div>
    );
};

export default connect(({ administrators, dispatch, loading }) => ({
    administrators,
    dispatch,
    loading: loading.effects['administrators/getDataSource'],
}))(Administrators);
